<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教学展示</title>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--导航栏-->
<header id="section_header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <!-- <div class="row"> -->
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img style="display: inline-block" src="images/logo1.png" alt="">&nbsp;&nbsp;教学网站展示
            </a>
        </div><!--Navbar header End-->
        <nav class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1" role="navigation">
            <ul class="nav navbar-nav navbar-right ">
                <li class="active"> <a href="#slider_part" class="page-scroll">Home </a></li>
                <li class=""><a href="#service" class="page-scroll">Services</a> </li>
                <li class=""><a href="#portfolio" class="page-scroll">Portfolio</a> </li>
                <li class=""><a href="#about" class="page-scroll">About Us </a> </li>
                <li class=""><a href="#team" class="page-scroll">Our Team </a> </li>
                <li><a href="#blog" class="page-scroll">Blog</a> </li>
                <li><a href="#contact" class="page-scroll">Contact Us</a> </li>
            </ul>
        </nav>
    </div><!-- /.container-fluid -->
</header>
<!--轮播图-->
<section id="slider_part">
    <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators text-center">
            <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
        </ol>

        <div class="carousel-inner" style="height: 500px">
            <div class="item">
                <div class="overlay-slide">
                    <img src="images/02.jpg" alt="" class="img-responsive">
                </div>

            </div>
            <div class="item">
                <div class="overlay-slide">
                    <img src="images/02.jpg" alt="" class="img-responsive">
                </div>

            </div>
            <div class="item active">
                <div class="overlay-slide">
                    <img src="images/02.jpg" alt="" class="img-responsive">
                </div>

            </div>

        </div> 	 <!-- End Carousel Inner -->

        <!-- Controls -->
        <div class="slides-control ">
            <!--<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">-->
            <!--<span><i class="fa fa-angle-left"></i></span>-->
            <!--</a>-->
            <!--<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">-->
            <!--<span><i class="fa fa-angle-right"></i></span>-->
            <!--</a>-->

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>
<!--产品展示-->
<section id="service">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="feature_header text-center">
                    <h3 class="feature_title">Our <b>Services</b></h3>
                    <h4 class="feature_sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Iusto provident non voluptatibus animi quidem incidunt eum, eligendi doloribus dicta.</h4>
                    <div class="divider"></div>
                </div>
            </div>  <!-- Col-md-12 End -->
        </div>
        <div class="row">
            <div class="main_feature text-center">
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="feature_content">
                        <i class="fa fa-lightbulb-o"></i>
                        <h5>Lightweight</h5>
                        <p>You can not ignore mobile devices anymore and with this theme all your visitors will be very pleased how they see your website.</p>
                        <button class="btn btn-main"> Read More</button>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="feature_content">
                        <i class="fa fa-pencil"></i>
                        <h5>Beautiful Typrography</h5>
                        <p>This theme integrates with WordPress in the most awesome way! Functionality is separated from style through uncreadble useful for user. </p>
                        <button class="btn btn-main"> Read More</button>
                    </div>
                </div> <!-- Col-md-4 Single_feature End -->
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="feature_content">
                        <i class="fa fa-cog"></i>
                        <h5>Full time Support</h5>
                        <p>Full Time support. Very much helpful and possesive at the same time. With all this in mind you won’t be outdated anytime soon. Really!! </p>
                        <button class="btn btn-main"> Read More</button>
                    </div>
                </div> <!-- Col-md-4 Single_feature End -->
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="feature_content">
                        <i class="fa fa-desktop"></i>
                        <h5>Ultra Responsive</h5>
                        <p>Shadow is as optimized as it gets. No useless wrappers, no double headings, everything is coded with SEO in mind. Content is KING! </p>
                        <button class="btn btn-main"> Read More</button>
                    </div>
                </div> <!-- Col-md-4 Single_feature End -->
                <!-- <button class="btn btn-main"> Read More</button> -->
            </div>
        </div>  <!-- Row End -->
    </div>  <!-- Container End -->
</section>
<script src="lib/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>